<template>
  <view class="search-bar">
    <wd-input
      v-model="searchValue"
      placeholder="搜索账号名称或用户名"
      clearable
      @clear="onClear"
      @input="onInput"
    >
      <template #prefix>
        <wd-icon name="search" size="18px" color="#999"></wd-icon>
      </template>
    </wd-input>
  </view>
</template>

<script>
export default {
  name: 'SearchBar',
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    onInput() {
      this.$emit('search', this.searchValue)
    },
    onClear() {
      this.$emit('clear')
    }
  }
}
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.search-bar {
  padding: 10px 0;
  
  :deep(.wd-input__inner) {
    background-color: #f5f5f5;
    border-radius: 20px;
    height: 40px;
    font-size: 14px;
  }
}
</style>